
<template>
    <div class="content">
        <div class="recommend-title">热门推荐</div>
        <ul>
            <li class="item" v-for="item of recommentList" :key="item.id">
                <img :src="item.imgUrl" alt="" class="item-img">
                <div class="item-info">
                    <p class="item-intro">{{item.intro}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommentList: [{
        id: '001',
        imgUrl: 'https://m.tuniucdn.com/fb2/t1/G5/M00/0C/FE/Cii-s1sE4ciIYTpYAKfWcEflRE4AAHOYAE8ngwAp9aI523_w640_h480_c1_t0_w640_h320_c1_t0.jpg',
        intro: '海南三亚亲子双飞3-8日自由行',
        desc: '亚特兰蒂斯/美高梅/天域/希尔顿/国光/红树林等人气房型任选，亲子大礼包放送，体验小小神射手、萌宠乐园等亲子活动'
      }, {
        id: '002',
        imgUrl: 'https://m.tuniucdn.com/fb2/t1/G5/M00/38/BE/Cii-tFpYQyiIE7s-ANydeO1axHsAACH9QHaiwcA3J2Q319_w640_h480_c1_t0_w640_h320_c1_t0.jpg',
        intro: '海南三亚亲子双飞3-8日自由行',
        desc: '亚特兰蒂斯/美高梅/天域/希尔顿/国光/红树林等人气房型任选，亲子大礼包放送，体验小小神射手、萌宠乐园等亲子活动'
      }, {
        id: '003',
        imgUrl: 'https://m.tuniucdn.com/fb2/t1/G5/M00/38/BE/Cii-tFpYQyiIE7s-ANydeO1axHsAACH9QHaiwcA3J2Q319_w640_h480_c1_t0_w640_h320_c1_t0.jpg',
        intro: '海南三亚亲子双飞3-8日自由行',
        desc: '亚特兰蒂斯/美高梅/天域/希尔顿/国光/红树林等人气房型任选，亲子大礼包放送，体验小小神射手、萌宠乐园等亲子活动'
      }, {
        id: '004',
        imgUrl: 'https://m.tuniucdn.com/fb2/t1/G5/M00/38/BE/Cii-tFpYQyiIE7s-ANydeO1axHsAACH9QHaiwcA3J2Q319_w640_h480_c1_t0_w640_h320_c1_t0.jpg',
        intro: '海南三亚亲子双飞3-8日自由行',
        desc: '亚特兰蒂斯/美高梅/天域/希尔顿/国光/红树林等人气房型任选，亲子大礼包放送，体验小小神射手、萌宠乐园等亲子活动'
      }, {
        id: '005',
        imgUrl: 'https://m.tuniucdn.com/fb2/t1/G5/M00/38/BE/Cii-tFpYQyiIE7s-ANydeO1axHsAACH9QHaiwcA3J2Q319_w640_h480_c1_t0_w640_h320_c1_t0.jpg',
        intro: '海南三亚亲子双飞3-8日自由行',
        desc: '亚特兰蒂斯/美高梅/天域/希尔顿/国光/红树林等人气房型任选，亲子大礼包放送，体验小小神射手、萌宠乐园等亲子活动'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import  '~styles/varibles.styl'
  .content
    .recommend-title
      width: 100%
      height: .8rem
      line-height: .8rem
      text-align: center
      background: #eeeeee
      font-size: 15px
      font-weight: 600
      color: $color6
    ul
      .item
        width: 100%
        overflow: hidden
        height: 0
        padding-bottom: 50%
        position: relative
        .item-img
          width: 100%
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: 1rem
        .item-info
          width: 100%
          position: absolute
          left: 0
          right: 0
          bottom: 0rem
          height: 1rem
          overflow: hidden
          background: #fff
          .item-intro
            color: #333
            font-size: 15px
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          .item-desc
            color: #666
            font-size: 13px
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

</style>
